<!doctype html>
<html>
  <head>
    <title>take attributes</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>

    <polymer-element name="x-foo">
      <script>
        Polymer('x-foo', {
          publish: {
            bool: false,
            num: 42,
            str: "don't panic"
          }
        });
      </script>
    </polymer-element>

    <x-foo id="foo0" bool="true"></x-foo>
    <x-foo id="foo1" bool="false"></x-foo>
    <x-foo id="foo2" bool></x-foo>
    <x-foo id="foo3"></x-foo>
    <x-foo id="foo4" bool="squid"></x-foo>
    <x-foo id="foo5" bool="0"></x-foo>

    <polymer-element name="x-bar" attributes="bool num str">
      <script>
        Polymer('x-bar', {
          bool: false,
          num: 42,
          str: "don't panic"
        });
      </script>
    </polymer-element>

    <x-bar id="bar0" bool="true"></x-bar>
    <x-bar id="bar1" bool="false"></x-bar>
    <x-bar id="bar2" bool></x-bar>
    <x-bar id="bar3"></x-bar>
    <x-bar id="bar4" bool="squid"></x-bar>
    <x-bar id="bar5" bool="0"></x-bar>

    <polymer-element name="x-zot" extends="x-bar" attributes="bool">
      <script>
        Polymer('x-zot', {
          num: 84
        });
      </script>
    </polymer-element>

    <x-zot id="zot0" bool="true"></x-zot>
    <x-zot id="zot1" bool="false"></x-zot>
    <x-zot id="zot2" bool></x-zot>
    <x-zot id="zot3"></x-zot>
    <x-zot id="zot4" bool="squid"></x-zot>
    <x-zot id="zot5" bool="0"></x-zot>
    <x-zot id="zot6" num="185"></x-zot>    

    <polymer-element name="x-date" attributes="value">
      <script>
        Polymer('x-date', {
          value: new Date()
        });
      </script>
    </polymer-element>

    <x-date id="date1" value="2014/12/25"></x-date>
    <x-date id="date2" value="December 25, 2014"></x-date>
    <x-date id="date3" value="2014/12/25 11:45"></x-date>
    <x-date id="date4" value="2014/12/25 11:45:30"></x-date>
    <x-date id="date5" value="2014/12/25 11:45:30:33"></x-date>
    <x-date id="dated" value="2014/12/25T11:45:30:33"></x-date>
    
    <polymer-element name="x-array" attributes="values">
      <script>
        Polymer('x-array', {
          values: []
        });
      </script>
    </polymer-element>

    <x-array id="arr1" values="[0, 1, 2]"></x-array>
    <x-array id="arr2" values="[33]"></x-array>

    <polymer-element name="x-obj" attributes="values">
      <script>
        Polymer('x-obj', {
          values: {}
        });
      </script>
    </polymer-element>

    <x-obj id="obj1" values='{ "name": "Brandon", "nums": [1, 22, 33] }'></x-obj>
    <x-obj id="obj2" values='{ "color": "Red" }'></x-obj>
    <x-obj id="obj3" values="{ 'movie': 'Buckaroo Banzai', 'DOB': '07/31/1978' }"></x-obj>

  <script>
      var assert = chai.assert;
      document.addEventListener('WebComponentsReady', function() {
        assert.isTrue(document.querySelector("#foo0").bool);
        assert.isFalse(document.querySelector("#foo1").bool);
        assert.isTrue(document.querySelector("#foo2").bool);
        assert.isFalse(document.querySelector("#foo3").bool);
        // this one is only 'truthy'
        assert.ok(document.querySelector("#foo4").bool);
        // this one is also 'truthy', but should it be?
        assert.ok(document.querySelector("#foo5").bool);
        //
        assert.equal(document.querySelector("#foo0").num, 42);
        assert.equal(document.querySelector("#foo0").str, "don't panic");
        //
        assert.isTrue(document.querySelector("#bar0").bool);
        assert.isFalse(document.querySelector("#bar1").bool);
        assert.isTrue(document.querySelector("#bar2").bool);
        assert.isFalse(document.querySelector("#bar3").bool);
        // this one is only 'truthy'
        assert.ok(document.querySelector("#bar4").bool);
        // this one is also 'truthy', but should it be?
        assert.ok(document.querySelector("#bar5").bool);
        //
        assert.equal(document.querySelector("#bar0").num, 42);
        assert.equal(document.querySelector("#bar0").str, "don't panic");
        //
        assert.isTrue(document.querySelector("#zot0").bool);
        assert.isFalse(document.querySelector("#zot1").bool);
        assert.isTrue(document.querySelector("#zot2").bool);
        assert.isFalse(document.querySelector("#zot3").bool);
        // this one is only 'truthy'
        assert.ok(document.querySelector("#zot4").bool);
        // this one is also 'truthy', but should it be?
        assert.ok(document.querySelector("#zot5").bool);
        //
        assert.equal(document.querySelector("#zot0").num, 84);
        assert.equal(document.querySelector("#zot6").num, 185);
        assert.equal(document.querySelector("#zot0").str, "don't panic");
        // 
        // Date deserialization tests
        assert.equal(String(document.querySelector("#date1").value), String(new Date(2014, 11, 25)));
        assert.equal(String(document.querySelector("#date2").value), String(new Date(2014, 11, 25)));
        assert.equal(String(document.querySelector("#date3").value), String(new Date(2014, 11, 25, 11, 45)));
        assert.equal(String(document.querySelector("#date4").value), String(new Date(2014, 11, 25, 11, 45, 30)));
        // Failures on Firefox. Need to fix this with custom parsing
        //assert.equal(String(document.querySelector("#date5").value), String(new Date(2014, 11, 25, 11, 45, 30)));
        //
        // milliseconds in the Date string not supported on Firefox
        //assert.equal(document.querySelector("#date5").value.getMilliseconds(), new Date(2014, 11, 25, 11, 45, 30, 33).getMilliseconds());
        //
        // Array deserialization tests
        assert.deepEqual(document.querySelector("#arr1").values, [0, 1, 2]);
        assert.deepEqual(document.querySelector("#arr2").values, [33]);
        // Object deserialization tests
        assert.deepEqual(document.querySelector("#obj1").values, { name: 'Brandon', nums: [1, 22, 33] });
        assert.deepEqual(document.querySelector("#obj2").values, { "color": "Red" });
        assert.deepEqual(document.querySelector("#obj3").values, { movie: 'Buckaroo Banzai', DOB: '07/31/1978' });
        //
        done();
      });
    </script>
  </body>
</html>
